<template>
	<div class="inline-edit-container">
		<!-- 显示模式 -->
		<div v-if="!isEditing" @click="startEdit" class="display-mode">
			<span class="display-text">{{ displayValue || '点击编辑' }}</span>
			<el-icon class="edit-icon"><Edit /></el-icon>
		</div>

		<!-- 编辑模式 -->
		<div v-else class="edit-mode">
			<!-- 日期选择器 -->
			<div v-if="type === 'date'" class="date-edit-container">
				<div class="date-picker-wrapper">
					<el-date-picker
						v-model="tempValue"
						type="date"
						placeholder="选择日期"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						size="small"
						@keyup.esc="cancelEdit"
						@change="onDateChange"
					/>
				</div>
				<!-- 操作按钮 -->
				<div class="date-actions">
					<el-button 
						size="small"
						type="primary"
						@click="confirmEdit"
						:loading="loading"
						:disabled="loading"
						title="确认"
						circle
					>
						<el-icon><Check /></el-icon>
					</el-button>
					<el-button 
						size="small"
						@click="cancelEdit"
						:disabled="loading"
						title="取消"
						circle
					>
						<el-icon><Close /></el-icon>
					</el-button>
				</div>
			</div>
			
			<!-- 文本输入框 -->
			<div v-else class="text-edit-container">
				<el-input
					v-model="tempValue"
					:placeholder="placeholder"
					size="small"
					:maxlength="maxLength"
					@keyup.enter="confirmEdit"
					@keyup.esc="cancelEdit"
					ref="inputRef"
				/>
				<!-- 文本输入的操作按钮 -->
				<div class="text-actions">
					<el-button 
						size="small"
						type="primary"
						@click="confirmEdit"
						:loading="loading"
						:disabled="loading"
						title="确认"
						circle
					>
						<el-icon><Check /></el-icon>
					</el-button>
					<el-button 
						size="small"
						@click="cancelEdit"
						:disabled="loading"
						title="取消"
						circle
					>
						<el-icon><Close /></el-icon>
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, watch } from 'vue';
import { Edit, Check, Close } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

interface Props {
	value?: string | null;
	type?: 'text' | 'date';
	placeholder?: string;
	maxLength?: number;
	loading?: boolean;
}

interface Emits {
	(e: 'update', value: string | null): void;
	(e: 'confirm', value: string | null): void;
	(e: 'cancel'): void;
}

const props = withDefaults(defineProps<Props>(), {
	type: 'text',
	placeholder: '请输入',
	maxLength: 128,
	loading: false
});

const emit = defineEmits<Emits>();

const isEditing = ref(false);
const toSafeValue = (value: string | null | undefined): string | null => (value == null ? null : value);

const tempValue = ref<string | null>(toSafeValue(props.value));
const inputRef = ref();

// 显示值计算
const displayValue = computed(() => {
	if (props.type === 'date' && props.value) {
		return props.value;
	}
	return props.value || '';
});

// 开始编辑
const startEdit = () => {
	if (props.loading) return;
	
	isEditing.value = true;
	tempValue.value = toSafeValue(props.value);
	
	nextTick(() => {
		if (props.type === 'text' && inputRef.value) {
			inputRef.value.focus();
		}
	});
};

// 日期选择变化处理
const onDateChange = (value: string | null) => {
	tempValue.value = value;
};

// 确认编辑
const confirmEdit = async () => {
	if (props.loading) return;
	
	// 验证输入
	if (props.type === 'text' && props.maxLength && tempValue.value && tempValue.value.length > props.maxLength) {
		ElMessage.warning(`输入内容不能超过${props.maxLength}个字符`);
		return;
	}
	
	// 如果值没有变化，直接取消编辑
	if (tempValue.value === props.value) {
		cancelEdit();
		return;
	}
	
	emit('confirm', tempValue.value);
	emit('update', tempValue.value);
};

// 取消编辑
const cancelEdit = () => {
	isEditing.value = false;
	tempValue.value = toSafeValue(props.value);
	emit('cancel');
};

// 监听loading变化，编辑完成后关闭编辑模式
watch(() => props.loading, (newLoading, oldLoading) => {
	if (oldLoading && !newLoading && isEditing.value) {
		isEditing.value = false;
	}
});

watch(
	() => props.value,
	(newValue) => {
		if (!isEditing.value) {
			tempValue.value = toSafeValue(newValue);
		}
	}
);
</script>

<style scoped>
.inline-edit-container {
	position: relative;
	min-height: 24px;
}

.display-mode {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.display-mode:hover {
	background-color: var(--el-fill-color-light);
}

.display-text {
	flex: 1;
	color: var(--el-text-color-primary);
}

.display-text:empty::before {
	content: '点击编辑';
	color: var(--el-text-color-placeholder);
}

.edit-icon {
	margin-left: 8px;
	color: var(--el-text-color-placeholder);
	font-size: 12px;
	opacity: 0;
	transition: opacity 0.2s;
}

.display-mode:hover .edit-icon {
	opacity: 1;
}

.edit-mode {
	position: relative;
}

.date-edit-container {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.text-edit-container {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

.date-picker-wrapper {
	display: flex;
	align-items: center;
}

.date-actions {
	display: flex;
	gap: 6px;
	justify-content: flex-start;
	padding: 4px 0;
}

.date-actions .el-button {
	width: 24px;
	height: 24px;
	padding: 0;
	min-width: 24px;
}

.text-actions {
	display: flex;
	gap: 4px;
}

.text-actions .el-button {
	width: 24px;
	height: 24px;
	padding: 0;
	min-width: 24px;
}
</style>
